<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="http://res.769.com/css/base.css" media="all" />
        <style>
            .Y-autoComplete-selected {
                background: #ebebeb;
            }
            
            #show {
                width: 200px;
                margin: 100px auto;
            }
            
            #container {
                border: 1px solid #ccc;
                background: #fbfbfb;
                display: none;
                margin-top: 10px;
            }
            
            input {
                border: 1px solid #ccc;
                height: 25px;
                width: 200px;
            }
            
            .orange {
                color: #FF5500;
            }
            
            .simple-autocomplete-container {
                border: 1px solid #ddd;
                box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);
            }
            
            .simple-autocomplete-select {
                background: #f1f1f1;
            }
            
            .simple-autocomplete-container li {
                padding: 3px 10px;
            }
        </style>
    </head>
    <body>
        <div id="show">
            <input type="text" id="complete" name=""/>
        </div>
        <div class="show">
            <select>
                <option value="javascript">javascript</option>
                <option value="java">java</option>
                <option value="ruby">ruby</option>
                <option value="json">json</option>
                <option value="jukoes">jukoes</option>
                <option value="options">options</option>
            </select>
            <input type="text" id="selectTest"/>
            <button id="activeBtn">
                active
            </button>
        </div>
        <script type="text/javascript" src="../../jquery.js">
        </script>
        <script type="text/javascript" src="../SimpleCore.js">
        </script>
        <script type="text/javascript" src="SimpleAutoComplete.js">
        </script>
        <script type="text/javascript">
            new Simple.AutoComplete({
                node: $("#complete")[0],
                source: ["javascript", "superman", "subsvn", "java", "jukies", "actionscript"]
            })
            
            Simple.declare("Combobox", null, {
                node: null,
                init: function(){
                    if (this.node) {
                        var self = this, data = [];
                        this.node = $(this.node);
                        this.renderNode = $("<input type='text'/>").addClass("simple-combobox-input");
                        this.activeBtn = $("<a>").addClass("simple-combobox-active").text("激活");
                        self.node.find("option").each(function(){
                            var val = $(this).val(), text = $(this).text();
                            data.push({
                                label: text,
                                value: val
                            });
                        });
                        this.allData = data;
                        this.autoObj = this.renderNode.autocomplete({
                            source: function(value, callback){
                                data = self.autoObj.data("widget_autocomplete").filterData(self.allData, value);
                                callback(data);
                            },
                            onselect: function(val){
                                self.node.val(val);
                            }
                        });
                        this.activeBtn.click(function(){
                            self.autoObj.data("widget_autocomplete").parseData(self.allData);
                        });
                        this.node.after(this.renderNode);
                        this.renderNode.after(this.activeBtn);
                        this.node.hide();
                    }
                },
                destroy: function(){
                    this.node.show();
                    this.renderNode.remove();
                    this.activeBtn.remove();
                }
            });
            Simple.bridgeTojQuery("combobox", Simple.Combobox);
            $("select").combobox({
                renderNode: "#selectTest",
                activeBtn: "#activeBtn"
            });
        </script>
    </body>
</html>
